<template>
  <div class="mod-role">
    <el-form
      class="formEl"
      :inline="true"
      :model="dataForm"
      label-width="100px"
    >
      <el-form-item label="球队" prop="teamId">
        <el-select
          v-model="dataForm.teamId"
          filterable
          :style="{ width: '100%' }"
          @change="getDataList"
        >
          <el-option
            v-for="item in teamList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="batchCancelHandle()" v-if="isEdit"
          >取消</el-button
        >
        <el-button type="primary" @click="batchSaveHandle()" v-if="isEdit"
          >保存</el-button
        >
        <el-button type="primary" @click="batchEditHandle()" v-if="!isEdit"
          >编辑</el-button
        >
        <el-button type="danger" @click="batchDelHandle()">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="teamName" label="球队名称" align="center">
        <template #default="scope">
          <div style="display: inline-flex">
            <div style="display: flex; align-items: center">
              {{ name }}
            </div>
            <img :src="logoUrl" width="63px" height="91px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="memberNick" label="球员昵称" align="center">
        <template #default="scope">
          <div v-if="scope.row._state !== 'edit'">
            {{ scope.row.memberNick }}
          </div>
          <div v-else>
            <el-input
              v-model="scope.row.memberNick"
              placeholder="球员昵称"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="playerNumber" label="球衣号" align="center">
        <template #default="scope">
          <div v-if="scope.row._state !== 'edit'">
            {{ scope.row.playerNumber }}
          </div>
          <div v-else>
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="scope.row.playerNumber"
            >
            </el-input-number>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dutyDetail" label="位置" align="center">
        <template #default="scope">
          <div v-if="scope.row._state !== 'edit'">
            {{ scope.row.dutyDetail }}
          </div>
          <div v-else>
            <el-input
              v-model="scope.row.dutyDetail"
              placeholder="位置"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="enableFlag"
        width="100"
        label="启禁状态"
        align="center"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row._state !== 'edit'"
            type="text"
            size="small"
            :style="scope.row.enableFlag === 0 ? 'color: red' : 'color: green'"
            >{{ scope.row.enableFlag === 0 ? "禁用" : "启用" }}</el-button
          >
          <div v-else>
            <el-switch
              v-model="scope.row.enableFlag"
              :active-value="1"
              :inactive-value="0"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center" v-if="isEdit">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="delHandle(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button
      icon="el-icon-plus"
      style="width: 100%"
      @click="addHandle()"
      v-if="isEdit"
    ></el-button>
  </div>
</template>

<script>
import { request } from "@/utils/axios-util";

export default {
  data() {
    return {
      dataForm: {},
      //球队信息
      id: "",
      name: "",
      logoUrl: "",
      // 队员列表
      dataList: [],
      dataListSelections: [],
      dataListLoading: false,
      teamList: [],
      userInfo: {},
      // 编辑标识
      isEdit: false,
      // 单个删除数据
      delData: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getTeamList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      if (!this.dataForm.teamId) {
        return this.$message.error("请选择球队！");
      }
      if (this.isEdit) {
        return this.$message.error("正在编辑中，请保存好数据后操作！");
      }
      this.dataListLoading = true;
      this.delData = [];
      this.isEdit = false;
      request(
        "/admin/leagueInfo/teamMember/page",
        {
          appCode: this.userInfo.appCode,
          tenantId: this.userInfo.tenantId,
          leagueCode: this.userInfo.leagueCode,
          ...this.dataForm,
        },
        "POST"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.id = res.data.id;
            this.name = res.data.name;
            this.logoUrl = res.data.logoUrl;
            this.dataList = res.data.players;
          } else {
            this.dataList = [];
            this.$message.error(res.msg);
          }
          this.dataListLoading = false;
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 获取球队信息
    getTeamList() {
      const leagueCodeInit = this.userInfo.leagueCode;
      request(
        "/portal/leagueInfo/teamInfo?leagueCode=" + leagueCodeInit,
        {},
        "GET"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.teamList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 编辑-取消
    batchCancelHandle() {
      this.isEdit = false;
      this.getDataList();
    },
    // 编辑
    batchEditHandle() {
      this.isEdit = true;
      this.dataList = this.dataList.map((item) => ({
        ...item,
        _state: "edit",
      }));
    },
    // 单个删除
    delHandle(row, index) {
      if (row.memberId !== null) {
        this.delData.push({ ...row, deleteFlag: 1 });
      }
      this.dataList.splice(index, 1);
    },
    //新增
    addHandle() {
      this.dataList.push({
        _state: "edit",
        memberId: null,
        playerNumber: null,
        memberNick: "",
        dutyDetail: "",
        enableFlag: 1,
        deleteFlag: 0,
      });
    },
    // 保存
    batchSaveHandle() {
      const teamMemberInfoList = [...this.dataList, ...this.delData];
      const data = {
        teamMemberInfoList,
        teamId: this.id,
        leagueCode: this.userInfo.leagueCode,
      };
      this.requestUrl(data);
    },
    // 批量删除
    batchDelHandle() {
      if (this.isEdit) {
        return this.$message.error("正在编辑中，请保存好数据后操作！");
      }
      if (this.dataListSelections.length === 0) {
        return this.$message.error("请至少选择一条数据！");
      }
      const memberNicks = this.dataListSelections.map((item) => {
        return item.memberNick;
      });
      const teamMemberInfoList = this.dataListSelections.map((item) => ({
        ...item,
        deleteFlag: 1,
      }));
      const data = {
        teamMemberInfoList,
        teamId: this.id,
        leagueCode: this.userInfo.leagueCode,
      };
      this.$confirm(`确定对球员[${memberNicks}]，进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.requestUrl(data);
      });
    },
    requestUrl(data) {
      request("/admin/leagueInfo/teamMember/edit", data, "POST").then(
        (res) => {
          if (res.code === 200) {
            this.isEdit = false;
            this.getDataList();
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("操作失败，", resp);
        }
      );
    },
  },
};
</script>
<style type="text/sass" scoped>
.formEl {
  display: flex;
  flex-wrap: wrap;
}

.page {
  float: right;
  margin-top: 10px;
}
</style>
